<template>
  <div class="contact-page">
    <!-- 1. Title CONTACT -->
    <h1 class="contact-title">CONTACT</h1>

    <!-- 2. メールアドレス + 填写框 (确认用) -->
    <div class="form-wrapper">
  <form @submit.prevent="submitForm">
    <div class="form-grid">
      <!-- 左侧 -->
      <div class="form-column">
        <div class="input-section">
  <label class="section-label">個人/法人 <span class="required">*</span></label>
  <div class="radio-group">
    <label class="radio-option">
      <input type="radio" value="個人" v-model="form.userType"> 個人
    </label>
    <label class="radio-option">
      <input type="radio" value="法人" v-model="form.userType"> 法人
    </label>
  </div>
</div>
        <div class="form-group required">
          
          <label class="input-label">お名前</label>
          <input type="text" v-model="form.name" placeholder="【例】山田 太郎" required />
        </div>

        <div class="form-group required">
          <label class="input-label">住所</label>
          <div class="address-group">
            <input type="text" v-model="form.zip" placeholder="【例】2210052" />
            <small class="input-hint">※ 半角数字、7桁 ハイフンなし</small>
            <input type="text" v-model="form.prefecture" placeholder="【例】神奈川県" />
            <input type="text" v-model="form.address" placeholder="【例】横浜市神奈川区栄町10-35..." />
          </div>
        </div>

        <div class="form-group required">
          <label class="input-label">メールアドレス</label>
          <input type="email" v-model="form.email" placeholder="【例】sample@sakuradream.com" />
          <small class="input-hint">※ 半角英数字 ハイフンなし</small>
        </div>

        <div class="form-group required">
          <label class="input-label">確認のため、もう一度入力してください</label>
          <input type="email" v-model="form.emailConfirm" />
        </div>
      </div>

      <!-- 右侧 -->
      <div class="form-column">
        <div class="form-group">
          <label>会社名</label>
          <input type="text" v-model="form.company" />
          <small class="input-hint">※ 法人を選択された方のみご記入ください</small>
        </div>

        <div class="form-group">
          <label>ふりがな</label>
          <input type="text" v-model="form.furigana" placeholder="【例】やまだ たろう" />
        </div>

        <div class="form-group required">
          <label>電話番号</label>
          <input type="text" v-model="form.phone" placeholder="【例】0456205898" />
          <small class="input-hint">※ 半角数字 ハイフンなし</small>
        </div>

        <div class="form-group">
          <label>FAX</label>
          <input type="text" v-model="form.fax" placeholder="【例】0453300058" />
          <small class="input-hint">※ 半角数字 ハイフンなし</small>
        </div>

        <div class="form-group required">
          <label>お問い合わせ内容</label>
          <textarea v-model="form.message" rows="7" placeholder="ご自由にご記入ください"></textarea>
        </div>
      </div>
    </div>

    <!-- 注意事项 -->
    <div class="form-note">
      <p><span class="required">*</span> の項目は必須です。必ず入力してください。</p>
    </div>

    <!-- 确认按钮 -->
    <div class="form-actions">
      <el-button 
        type="primary" 
        class="contact-title"
        @click="submitForm"
        style="
          font-size: 36px; 
          height: auto; 
          padding: 15px 30px;
        "
      >
        問い合わせ
      </el-button>
      <p>-メールのお問い合わせ- <br>メール：info@sakura-pharma.com<br>受付時間 平日 9:00 ~ 18:00</p>
    </div>
  </form>
</div>

    <!-- 7. 問い合わせ Section
    <div class="phone-contact">
      

     
    </div> -->

    
    <div >
      <!-- Footer -->
      <div>
        <p style="font-size:14px; color:#666; text-align: center;padding-top: 3%;">ごご質問・ご相談がございましたら、お気軽にお問い合わせください。内容確認後、担当者より改めてご連絡させていただきます。</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElButton } from 'element-plus'
import AWS from 'aws-sdk'

export default {
  name: 'ContactPage',
  components: {
    ElButton
  },
  data() {
    return {
      form: {
        userType: '個人',
        email: '',
        emailConfirm: '',
        name: '',
        company: '',  // 追加
        furigana: '', // 追加
        zip: '',      // 追加
        prefecture: '', // 追加
        address: '',  // 追加
        phone: '',
        fax: '',      // 追加
        inquiryType: '製品について問い合わせ種別',
        message: ''
      }
    }
  },
  methods: {
    handlePhoneInput(index, event) {
    if (event.target.value.length === 4 && index < 2) {
      this.$refs[`phone${index + 2}`].focus();
    }
  },
    async submitForm() {
      
      // 验证邮箱
      if (!this.form.email?.trim() || 
          this.form.email.trim() !== this.form.emailConfirm?.trim()) {
        ElMessage.error('有効なメールアドレスを入力してください')
        return
      }
      
      // 验证内容
      if (!this.form.message?.trim()) {
        ElMessage.error('お問い合わせ内容をご入力ください（必須項目）')
        return
      }

      try {
        // 配置AWS SES
        AWS.config.update({
          region: 'ap-northeast-1', 
          credentials: new AWS.CognitoIdentityCredentials({
            IdentityPoolId: 'ap-northeast-1:40a402ca-116b-4ea0-8d09-b79577f6b435'
          })
        })

        const ses = new AWS.SES({apiVersion: '2010-12-01'})

        const params = {
          Destination: {
            ToAddresses: ['info@sakura-pharma.com']
          },
          Message: {
            Body: {
              Text: {
                Data: `
                  ユーザータイプ: ${this.form.userType}
                  お名前: ${this.form.name}
                  会社名: ${this.form.company}
                  ふりがな: ${this.form.furigana}
                  郵便番号: ${this.form.zip}
                  都道府県: ${this.form.prefecture}
                  住所: ${this.form.address}
                  メールアドレス: ${this.form.email}
                  電話番号: ${this.form.phone}
                  FAX: ${this.form.fax}
                  お問い合わせ内容:
                  ${this.form.message}
                `
              }
            },
            Subject: {
              Data: 'お問い合わせフォームからのメッセージ'
            }
          },
          Source: 'sakura.pharma.jp@gmail.com' // SES验证过的发件邮箱
        }

        await ses.sendEmail(params).promise()
        
        ElMessage.success('送信が完了しました')
        
        // 重置表单
        this.form = {
          userType: '個人',
          email: '',
          emailConfirm: '',
          name: '',
          company: '',
          furigana: '',
          zip: '',
          prefecture: '',
          address: '',
          phone: '',
          fax: '',
          inquiryType: '製品について問い合わせ種別',
          message: ''
        }
      } catch (error) {
        console.error('送信エラー:', error)
        if(error.message.includes('message port closed')) {
          ElMessage.error('送信に失敗しました。ブラウザの拡張機能を無効にして再試行してください')
        } else {
          ElMessage.error('送信に失敗しました。もう一度お試しください')
        }
      }
    }
  }
}
</script>

<style scoped>
/* 🌸 Background and Layout */
.contact-page {
  background: linear-gradient(135deg, 
    #fff 0%, 
    #fff9f0 30%, 
    #fff0f5 70%, 
    #fff 100%);
  padding: 40px 20%; /* 增加上下内边距 */
  min-height: 80vh; /* 设置最小可视高度 */
  box-sizing: border-box; /* 包含padding在高度计算中 */
}

/* 📌 Title Style */
.contact-title {
  text-align: center;
  font-size: 36px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif; /* 添加黑体字体 */
  font-weight: 400; /* 取消加粗 */
  color: #666;
}
.contact-title.el-button {
  margin: 40px 0 !important;
  border: 1px solid #ddd !important; /* 添加边框 */
  background: #fff !important; /* 白色背景 */
  color: #666 !important; /* 深灰色文字 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加轻微阴影 */
}

/* 添加悬停效果 */
.contact-title.el-button:hover {
  background: #f8f8f8 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
/* 📌 Input Section Styles */
.form-wrapper {
  padding: 2rem;
  font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.form-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.form-group {
  margin-bottom: 0;
}

/* 调整输入框样式 */
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #bfa76f;
  outline: none;
}

/* 调整单选按钮组样式 */
.radio-group {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

/* 调整地址输入组 */
.address-group {
  display: flex;
  flex-direction: column;
}

.section-label {
  display: block;
  font-size: 16px;
  font-weight: 400; /* 从600改为400，取消加粗 */
  color: #333;
  margin-bottom: 12px;
}

.input-label {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #444;
  margin-bottom: 10px;
}

.form-group small.input-hint {
  display: block;
  color: #888;
  font-size: 10px !important;
  margin: 5px 0 8px;
}

.radio-group {
  margin-bottom: 20px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  font-size: 15px;
  color: #555;
}

.form-group {
  margin-bottom: 25px;
}

.address-group input {
  margin-bottom: 0px;
}

/* 调整原有样式 */
.form-grid {
  gap: 50px; /* 增加列间距 */
}

.form-column {
  padding: 15px;
}
.form-group {
  margin-bottom: 1rem;
}
.form-group.required label::after {
  content: ' *';
  color: red;
}
.form-group input,
.form-group textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.form-note {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: #c00;
}
.form-actions {
  text-align: center;
  margin-top: 2rem;
}
.form-actions button {
  background-color: #bfa76f;
  color: white;
  padding: 10px 30px;
  border-radius: 8px;
  font-size: 1rem;
  border: none;
}

@media (max-width: 768px) {
  .contact-page {
    padding: 20px 10px !important; /* 减少上下左右的内边距 */
  }
  
  .form-wrapper {
    padding: 1rem 0 !important; /* 移除表单容器的左右内边距 */
  }
  
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .form-column {
    padding: 0 !important;
  }
  
  .form-group input,
  .form-group textarea {
    width: 90%;
    padding: 15px !important; /* 增加输入框的内边距 */
  }
  
  .contact-title.el-button {
    width: 100% !important; /* 按钮宽度100% */
    margin: 20px 0 !important;
  }
  
  .form-actions {
    margin-top: 1rem;
  }
  
  .contact-title.el-button {
    font-size: 24px !important;
    padding: 10px 20px !important;
  }
  
  /* 移除其他不必要的移动端样式 */
  .phone-input,
  .email-confirm {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
</style>


